<template>
  <div>
    <div style="float: left">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="80px"
        style="width: 500px; margin: 2px"
      >
        <el-form-item label="灯杆编号" prop="poleNum">
          <el-input v-model="form.poleNum"></el-input>
        </el-form-item>
        <el-form-item label="连接状态" prop="status" style="width: 230px">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">在线</el-radio>
            <el-radio :label="2">不在线</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="所在区域" style="width: 100px">
          <el-button type="primary" size="mini" @click="location"
            >定位</el-button
          >
        </el-form-item>
        <el-form-item label="经度" prop="longitude">
          <el-input v-model="form.longitude"></el-input>
        </el-form-item>
        <el-form-item label="维度" prop="latitude">
          <el-input v-model="form.latitude"></el-input>
        </el-form-item>
        <el-form-item label="负责人" prop="useName">
          <el-input v-model="form.useName"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="add">添加</el-button>
          <el-button @click="list">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-form style="float: right; width: 1000px">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-col :span="12">
              <el-form-item label="位置经度" prop="lng">
                <el-input
                  v-model="model.lng"
                  type="number"
                  class="input_number"
                  @mousewheel.native.prevent
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="位置维度" prop="lat">
                <el-input
                  v-model="model.lat"
                  type="number"
                  class="input_number"
                  @mousewheel.native.prevent
                /> </el-form-item
              ><el-button type="text" @click="add1">返回</el-button>
            </el-col>
            <el-col :span="24">
              <baidu-map
                class="bm-view"
                ak="QFgFQorrB84maOZh0pPGC8kUiP0mGIhx"
                :center="center"
                :zoom="zoom"
                :scroll-wheel-zoom="true"
                @ready="createMap"
              >
                <!-- 搜索-->
                <bm-local-search
                  :keyword="model.address"
                  :auto-viewport="true"
                  style="display: none"
                ></bm-local-search>
                <!-- 标记-->
                <bm-marker-clusterer>
                  <bm-marker :position="{ lng: model.lng, lat: model.lat }" />
                </bm-marker-clusterer>
              </baidu-map>
              <el-input
                v-model="model.address"
                placeholder="搜索地点"
                style="
                  margin-left: 10px;
                  width: 200px;
                  position: absolute;
                  top: 25%;
                  opacity: 0.9;
                "
                prefix-icon="el-icon-search"
              ></el-input>
            </el-col>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
import myBreadcrumb from "@/views/Breadcrumb.vue";

import BaiduMap from "vue-baidu-map/components/map/Map.vue";
//标记点
import BmMarkerClusterer from "vue-baidu-map/components/extra/MarkerClusterer";
//搜索
import BmLocalSearch from "vue-baidu-map/components/search/LocalSearch.vue";
import { addLightPolesapi } from "@/api/iotInfo/LightPoles";
export default {
  components: {
    BaiduMap,
    BmMarkerClusterer,
    BmLocalSearch,
    myBreadcrumb,
  },
  data() {
    return {
      center: { lng: 0, lat: 0 },
      zoom: 10,
      model: {
        lng: "",
        lat: "",
        address: "",
      },
      form: {
        poleNum: "",
        status: 1,
        longitude: window.sessionStorage.getItem("Ing"),
        latitude: window.sessionStorage.getItem("lat"),
        useName: "",
        phone: "",
      },
      rules: {
        poleNum: [
          { required: true, message: "请输入灯杆编号", trigger: "blur" },
        ],
        status: [
          { required: true, message: "请选择连接状态", trigger: "change" },
        ],
        longitude: [{ required: true, message: "请输入经度", trigger: "blur" }],
        latitude: [{ required: true, message: "请输入维度", trigger: "blur" }],
        useName: [{ required: true, message: "请输入负责人", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入负责人联系方式", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    createMap({ BMap, map }) {
      // 百度地图API功能
      this.center.lng = 116.204;
      this.center.lat = 39.915;

      this.zoom = this.zoom;
      this.map2 = map;
      const viewthis = this;
      map.addEventListener("click", function (e) {
        viewthis.model.lng = e.point.lng;
        viewthis.model.lat = e.point.lat;
        window.sessionStorage.setItem("Ing", e.point.lng);
        window.sessionStorage.setItem("lat", e.point.lat);
      });

      // 区域图
      var datas = new Array("北京市-#665599");
      var bdary = new BMap.Boundary();
      for (var i = 0; i < datas.length; i++) {
        getBoundary(datas[i], bdary);
      }

      // 设置区域图
      function getBoundary(data, bdary) {
        data = data.split("-");
        bdary.get(data[0], function (rs) {
          // 获取行政区域
          var count = rs.boundaries.length; // 行政区域的点有多少个
          // var pointArray = []
          for (var i = 0; i < count; i++) {
            var ply = new BMap.Polygon(rs.boundaries[i], {
              strokeWeight: 2,
              strokeColor: "#ff0000",
              fillOpacity: 0.1,
              fillColor: data[1],
            }); // 建立多边形覆盖物
            map.addOverlay(ply); // 添加覆盖物
          }
        });
      }
    },
    //跳转
    add1() {
      this.$router.push("/iotInfo/AddLightPoles");
    },
    //添加
    add() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          addLightPolesapi(this.form).then((res) => {
            if (res.data) {
              this.$message({
                message: "添加成功",
                type: "success",
              });
              this.$router.push("/iotInfo/ShowLightPoles");
            } else {
              this.$message.error("添加失败");
              return;
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //跳转
    location() {
      this.$router.push("/iotInfo/Location");
    },
    //跳转
    list() {
      this.$router.push("/iotInfo/ShowLightPoles");
    },
  },
  created() {},
};
</script>
<style scoped>
.bm-view {
  width: 1300px;
  height: 800px;
}
</style>